.width {
  width: 1200px;
  margin: 0 auto;
}

.pc {
  display: block;
}

.ms {
  display: none;
}

.banner {
  width: 100%;
  height: 300px;
  display: flex;
  // margin-top: 8px;
}

.about_conten {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px 0 72px 0;

  .about_list_content_breadcrumb {
    display: flex;
    justify-content: flex-end;
  }

  .about_text_content {
    margin: 47px 0 0 0;
    width: 1567px;
    height: 626px;
    background: url(/src/assets/aboutUs-bg.png) no-repeat right;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .about_text_box {
      height: 535px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      // opacity: 0.2;
      .about_text_box_left,
      .about_text_box_right {
        width: calc(50% - 60px);
        height: 100%;

        .box_content_title {
          text-align: center;
          margin: 48px 0;

          h3 {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 20px;
            color: #ad2121;
          }

          span {
            display: inline-block;
            width: 20px;
            height: 2px;
            background: #666666;
            border-radius: 1px;
          }

          h4 {
            font-family: Microsoft YaHei;
            font-weight: 300;
            font-size: 14px;
            color: #666666;
            text-transform: uppercase;
          }
        }

        :deep(p) {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
          line-height: 32px;
          text-indent: 2em;
        }
      }
    }
  }

  .about_text_bottom {
    position: relative;
    margin-top: 208px;
    width: 100%;
    height: 462px;
    background: url(/src/assets/aboutUs-bottom.png) no-repeat center;
    background-size: 100% 100%;

    .about_text_bottom_box {
      width: 845px;
      height: 377px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      left: 50%;
      top: -136px;
      transform: translateX(-50%);

      >div {
        width: 384px;
        height: 100%;
        background: #ffffff;
        box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        img {
          width: 96px;
          height: 96px;
          margin-bottom: 38px;
        }

        p {
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 16px;
          color: #333333;
          line-height: 32px;
        }

        &:last-child {
          img {
            width: 96px;
            height: 104px;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 320px) and (max-width: 969px) {
  .pc {
    display: none;
  }

  .ms {
    display: block;
  }

  .banner {
    height: 200px;
    background-size: cover;
  }

  .about_conten {
    padding: 10px 0 36px 0;

    .about_list_content_breadcrumb {
      width: 90% !important;
    }

    .about_text_content {
      margin: 24px 0;
      width: 100%;
      height: auto;
      background: none;

      .about_text_box {
        flex-direction: column;
        height: auto;

        .about_text_box_left,
        .about_text_box_right {
          width: 100%;
          padding: 0 20px;
          box-sizing: border-box;

          .box_content_title {
            margin: 24px 0;
          }

          p {
            text-indent: 1.5em;
            line-height: 28px;
          }
        }
      }
    }

    .about_text_bottom {
      margin-top: 40px;
      height: auto;
      background: none;

      .about_text_bottom_box {
        flex-direction: column;
        position: static;
        transform: none;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;

        >div {
          width: 100%;
          margin-bottom: 20px;

          img {
            width: 64px;
            height: auto;
          }

          p {
            font-size: 14px;
            line-height: 24px;
          }
        }
      }
    }
  }
}
